import { homestay_list_api } from "./../api/homestay_api.js"
import './header.js'
import { baseURL } from './../utils/http.js'
let total = 20
let pageNum = 1
let pageSize = 10
let homestay_list = []
let rental_type = 0
//'大床房','单人标间','双人标间','豪华标间'
const rental_type_arr = ['大床房', '单人标间', '双人标间', '豪华标间']
const filter_form = {
  location: '',
  price_start: '0',
  price_end: '200',
  type: '大床房',
  people: ''
}
function main() {
  initRender()
  filter_search_button_event()
  homestay_list_req()
  // city_selecter_show()
  render_rental_type()
  rental_type_event()
  pagination_control()
}
main()
//表单元素值初始化
function initRender(params) {
  $('.filter-wrap-price .form_input:nth-child(1)').attr('value', filter_form.price_start)
  $('.filter-wrap-price .form_input:nth-child(2)').attr('value', filter_form.price_end)
}
//搜索按钮事件绑定
function filter_search_button_event(params) {
  $('.filter_search_button').on('click', function () {
    filter_form.price_start = $('.filter-wrap-price .form_input:nth-child(1)').val()
    filter_form.price_end = $('.filter-wrap-price .form_input:nth-child(2)').val()
    if (filter_form.price_start && filter_form.price_end) {
      filter_form.location=$('#addr-show03').val()
      filter_form.type=rental_type_arr[rental_type]
      filter_form.people=$('.people_input').val()
      homestay_list_req()
    } else {
      alert('请选择完整的价格区间')
    }
  })
}
//请求获取民宿列表
function homestay_list_req(params) {
  homestay_list_api(filter_form).then((res => {
    homestay_list = res.data
    homestay_render()
  })).catch((err)=>{
    alert('请求列表失败')
  })

}
//城市选择器显示控制
function city_selecter_show() {
  $('#addr-show03').on('click', function (e) {
    e.stopPropagation()
    $('#data-wrap').show()
  })
  $('body').on('click', function () {
    if ($('#data-wrap').css('display') == 'block') {
      $('#data-wrap').hide()
    }
  })
}
//渲染出租类型
function render_rental_type(params) {
  let template = ''
  rental_type_arr.forEach((item, index) => {
    template += `
    <div data-index="${index}" class="filter_item ${rental_type == index ? 'active' : ''}" style="cursor: pointer;">${item}</div>`
    $('.rental_type').html(template)
  })
}
//事件委托切换出租类型
function rental_type_event(params) {
  $('.rental_type').on('click', '.filter_item', function () {
    rental_type = $(this).attr('data-index')
    render_rental_type()
  })
}
//循环渲染民宿列表
function homestay_render(params) {
  let template = ''
  homestay_list.forEach((item, index) => {
    template += `
    <div class="room-item" homestay_id="${item.id}">
        <div class="room-left">
            <img src="${baseURL+item.image}" alt="">
        </div>
        <div class="room-mid">
            <div class="room-title">${item.name}</div>
            <div class="room-area">${item.location}</div>
            <div class="room-type">${item.type_text}&nbsp;可住${item.people}人</div>
            <div class="room-status">${item.status_text}</div>
        </div>
        <div class="room-right">
            <span class="room-price">${item.price}</span>
            <span class="room-price-unit">元/天</span>
        </div>
    </div>
    `
  })
  $('.room-list').html(template)
  bind_detail_jump_event()
}
//跳转民宿详情
function bind_detail_jump_event(params) {
  $('.room-list').on("click", ".room-item", function () {
    const homestay_id = $(this).attr('homestay_id')
    const homestay_detail=homestay_list.find((item,index)=>{
      return item.id==homestay_id
    })
    if (homestay_detail) {
      sessionStorage.setItem('homestay_detail',JSON.stringify(homestay_detail))
      window.location.assign('/index/Index/detail.html')
    }
  })
}
//分页组件控制
function pagination_control() {
  $('#pagination').pagination({
    // 总记录数
    total: total,
    // 每页显示条数
    pageSize: pageSize,
    // 在分页控件创建的时候显示的页数
    pageNumber: pageNum,
    // 用户可以改变页面大小
    pageList: [1, 2],
    // 定义数据是否正在载入
    loading: false,
    //buttons : '#tt',
    // 分页控件布局定义
    layout: ['prev', 'links', 'next'],
    // 定义是否显示页面导航列表
    showPageList: true,
    // 定义是否显示刷新按钮
    showRefresh: false,
    // 在输入组件之前显示一个 label 标签。
    beforePageText: '第',
    // 在输入组件之后显示一个 label 标签。
    afterPageText: '共{pages}条',
    // 显示页面信息
    displayMsg: '显示{from}到{to},共{total}记录',
    // 用户选择一个新页面的时候触发
    onSelectPage: function (pageNumber, pageSize) {
    },
  });
}
//位置筛选事件
function position_filter_event(params) {
  $('.addr-show03').on('change', function () {

  })
}


